import {useState, useEffect} from 'react'
import {useNavigate, useLocation} from 'react-router-dom'
import request from '../../utils/request.jsx'
import { Popup, Toast, Button } from 'antd-mobile'
import './style.less'

const PopupList = props => {
    const { onClose, popupId, popupVisible } = props
    const [data, setData] = useState('')
    const [visible, setVisible] = useState(false)
    const [color, setColor] = useState('')
    const [size, setSize] = useState('')
    const [count, setCount] = useState(1)
    useEffect(() => {
      getData()
    }, [popupVisible, popupId])
  
    const getData = async () => {
      Toast.show({
        icon: 'loading',
        content: '加载中…',
        duration: 500,
        afterClose: () => setVisible(popupVisible)
      })
      let { data } = await request.get(`/commodity?id=${popupId}`)
      setData(data)
    }
    const onSubmit = () => {
      const { id, name, price, image } = data[0]
      const shop = {
        id,
        name,
        image,
        count,
        color,
        size,
        price,
        allPrice: price * count
      }
      console.log(shop)
      onPopupClose()
    }
    const onPopupClose = () => {
      setColor('')
      setSize('')
      setCount(1)
      onClose()
    }
  
return (
    <div className='popup-list'>
        <Popup visible={visible} showCloseButton onClose={() => onPopupClose()}>
        <div className='popup-details'>
            {data &&
            data.map(item => (
                <div key={item.id}>
                <div className='top'>
                    <div className='image-detail'>
                    <img src={item.image} alt='img' />
                    <div>
                        <p>¥{item.price}</p>
                        {color && <p>已选择 {color.name}</p>}
                        {size && <p>{size} </p>}
                    </div>
                    </div>
                    <div className='color-detail'>
                    <p>颜色</p>
                    {item.colour &&
                        item.colour.map((val, index) => (
                        <span
                            key={index}
                            style={{
                            backgroundColor: val.color,
                            padding: '12px 20px'
                            }}
                            onClick={() => setColor(val)}
                        ></span>
                        ))}
                    </div>
                </div>
                <div className='center-size'>
                    <p>尺码</p>
                    {item.size &&
                    item.size.map((val, index) => (
                        <span
                        key={index}
                        style={{
                            backgroundColor: '#f0f0f0',
                            padding: '10px 16px'
                        }}
                        onClick={() => setSize(val)}
                        >
                        {val}
                        </span>
                    ))}
                </div>
                <div className='center-num'>
                    <p>购买数量</p>
                    <p style={{ fontSize: '24px' }}>
                    <span
                        style={{
                        padding: '12px 18px',
                        backgroundColor: '#f0f0f0'
                        }}
                        onClick={() => count > 1 && setCount(count - 1)}
                    >
                        -
                    </span>
                    <span
                        style={{
                        padding: '12px 18px'
                        }}
                    >
                        {count}
                    </span>
                    <span
                        style={{
                        padding: '12px 18px',
                        backgroundColor: '#f0f0f0'
                        }}
                        onClick={() => setCount(count + 1)}
                    >
                        +
                    </span>
                    </p>
                </div>
                </div>
            ))}
        </div>
        <Button block color='primary' size='large' onClick={() => onSubmit()}>
            确定
        </Button>
        </Popup>
    </div>
    )
}

export default PopupList